require('../less/sportdata.less')

require('../fonts/iconfont.css')

require('weui') //引入样式
const weui = require('weui.js') //引入js

document.ready(function () {


    utils.registers()
    /*柱状图  */
    function zhuzhuang(value, index) {
        //1实例化对象
        const myChart = echarts.init(document.getElementById('pillar'));

        //2配置参数
        const option = {

            title: {
                text: '近7天运动时长'
            },
            grid: {
                top: 50,
                left: "center"

            },


            xAxis: {
                type: 'category',
                data: value
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: index,
                type: 'bar'
            }]


        }

        //3将配置参数添加到报表中
        myChart.setOption(option);
    }


    /* 饼图 */
    function bingtu(sdata) {
        //1实例化对象
        const myChart = echarts.init(document.getElementById('pie'));

        //2配置参数
        const option = {
            title: {
                text: '运动分类',
                /*  subtext: '纯属虚构', */
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: "middle"
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: sdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{d}%',
                            position: "inner"
                        }
                    },

                }
            ]


        }

        //3将配置参数添加到报表中
        myChart.setOption(option);
    }



    /* 堆叠的条形图*/
    /*  function drawchart(datasport, dast) {
 
         //1.实例化对象
         const myChart = echarts.init(document.querySelector('#chart'));
 
 
         //2.配置参数
         const option = {
             //标题
             title: {
                 text: "近7日运动时长"
             },
             legend: {
                 orient: 'vertical',
                 right: "right",
                 top: "middle",
                 data: ['跑步', '骑行', '训练']
             },
             grid: {
                 left: '10%',
                 right: '20%',
                 bottom: '3%',
                 containLabel: true
             },
             xAxis: {
                 type: 'value'
             },
             yAxis: {
                 type: 'category',
                 data: datasport
             },
             series: [
                 {
                     name: '跑步',
                     type: 'bar',
                     stack: 'total',
                     label: {
                         show: true
                     },
                     emphasis: {
                         focus: 'series'
                     },
                     data: dast
                 },
                 {
                     name: '骑行',
                     type: 'bar',
                     stack: 'total',
                     label: {
                         show: true
                     },
                     emphasis: {
                         focus: 'series'
                     },
                     data: [120, 132, 101, 134, 90, 230, 210]
                 },
                 {
                     name: '训练',
                     type: 'bar',
                     stack: 'total',
                     label: {
                         show: true
                     },
                     emphasis: {
                         focus: 'series'
                     },
                     data: [220, 182, 191, 234, 290, 330, 310]
                 },
 
             ]
         }
 
         //3.将配置参数添加到报表中
         myChart.setOption(option);
     } */
    /* drawchart() */

    /* 折线图*/
    function zhexian(values, indexs) {
        //1实例化对象
        const myChart = echarts.init(document.querySelector('#line'));

        //2配置参数
        const option = {
            title: {
                text: '近七日训练次数',
                /*  subtext: '纯属虚构', */
                left: 'left'
            },
            xAxis: {
                type: 'category',
                data: values
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: indexs,
                type: 'line'
            }]
        }

        //3将配置参数添加到报表中
        myChart.setOption(option);
    }

    //累计天数
    const leijitian = document.querySelector(".leijitian")


    //发请求
    const id = localStorage.getItem("userId")
    $http.get(`/sport/data/${id}`, function (res) {
        if (res.status === 0) {
            // console.log(res);  //渲染柱状图
            const dataall = res.data.days.map(function (restwo) {
                return restwo.date.substr(5)
            })

            //总天数
            leijitian.textContent = dataall.length

            //  console.log(dataall);

            const sportsall = res.data.days.map(function (restwo) {
                return restwo.dayTimes
            })
            // console.log(sportsall);
            console.log(dataall);
            zhuzhuang(dataall, sportsall)

            /* 折线图 */
            zhexian(dataall, sportsall)
            /* //堆叠条形图
            drawchart(dataall, kongshuzu) */




            //定义对象保存运动数据
            const duixiang = {
                "跑步": 0,
                "骑行": 0,
                "训练": 0
            }
            //定义对象保存颜色
            const yanse = {

                '跑步': 'green',
                '骑行': 'red',
                '训练': 'blue',
            }

            //定义空数组
            const kongshuzu = []
            //渲染饼图
            res.data.days.forEach(function (value) {
                /*   console.log(value); */
                value.exerciseData.forEach(function (index) {
                    // console.log(index);
                    duixiang[index.type] += +index.time

                })
                console.log(duixiang);




                //遍历duixiang
                for (const key in duixiang) {
                    kongshuzu.push({
                        value: duixiang[key],
                        name: key,
                        itemStyle: {
                            color: yanse[key]
                        }
                    })
                }
                // console.log(kongshuzu);
                bingtu(kongshuzu)


                /*  //堆叠条形图
                 drawchart(dataall, kongshuzu) */

            })
        }

    })


    /* 给返回按钮添加返回事件 */
    const huiqu = document.querySelector("#huiqu")
    //分种
    const fenzhong = document.querySelector(".fenzhong")
    //千卡
    const qianka = document.querySelector(".qianka")
    //消耗千卡
    const xiaohaoqianka = document.querySelector(".xiaohaoqianka")

    //连续多少天
    const lianxu = document.querySelector(".lianxu")

    // //发请求
    $http.get(`/users/mysportsBadge?userId=${id}`, function (res) {
        if (res.status === 0) {
            //获取sports数据
            const sportsInof = res.data.sports;
            // console.log(userInof);

            //保存个人信息在本地存储中
            //转换为字符串
            localStorage.setItem("sportsInof", JSON.stringify(sportsInof))

            //时间
            if (sportsInof.times) fenzhong.textContent = parseInt(sportsInof.times);
            //千卡
            if (sportsInof.calorie) qianka.textContent = parseInt(sportsInof.calorie);

            //千卡
            if (sportsInof.calorie) xiaohaoqianka.textContent = parseInt(sportsInof.calorie);

            /*  console.log(dataall); *///计算连续天数
            lianxu.textContent = Math.floor(sportsInof.coursetims / 24);
            console.log(Math.floor(sportsInof.coursetims / 24))

            //累计天
            /*  leijitian.textContent = */

        }
    })


    huiqu.addEventListener("click", function () {
        weui.confirm('是否确定退出运动数据', function () {
            localStorage.clear()
            //跳转到登录页面哦
            location.href = "./my.html"
        })
    })

})